<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
    <title></title>
    <style>
        .tip {
            position: relative;
        }

        .tip:hover:before, .tip:hover:after {
            visibility: visible;
        }

        .tip:before, .tip:after {
            visibility: hidden;
            position: absolute;
        }

        .tip:before {
            top: auto;
            right: 50%;
            bottom: -7px;
            margin-right: -5px;
            width: 0;
            height: 0;
            content: '';
            border: 5px solid transparent;
            border-bottom-color: rgba(0, 0, 0, 0.9);
            pointer-events: none;
            z-index: 10000;
        }

        .tip:after {
            top: 100%;
            right: 50%;
            padding: 0 10px;
            border-radius: 3px;
            background-color: rgba(0, 0, 0, 0.9);
            color: #fff;
            font-size: 11px;
            font-weight: 500;
            content: attr(aria-label);
            white-space: pre;
            z-index: 10000;
            margin-top: 5px;
            line-height: 26px;
            transform: translateX(50%);
        }
    </style>
</head>
<body>
<lable class="tip" aria-label="提示">鼠标移过来有提示</lable>
</body>
</html>
